<script >
import {listComment, saveComment} from "../../api/comment";
import {ElMessage} from "element-plus";

export default {
    name: "CommentList",
    data() {
        return {
            comment: {},
            reply: null,

            current: 1,
            size: -1,
            pages: 0,
            total: 0,

            commentList: [],

            props: {
                label: 'content',
                children: 'children',
                isLeaf: 'leaf',
            },

            commentBtn:'评论'
        }
    },
    props: {
        id: String,
        type: String,
        flag: Boolean
    },
    watch: {
        flag() {
            //初始化
            this.comment = {
                resourceId: '',
                flag: true,
                group: 0,
                parentId: 0,
                questioner: 0,
                replier: 0,
                content: '',
            }
            this.reply = null
            this.commentBtn="评论"
        },
    },
    methods: {
        replyComment(data){
            this.reply=this.user.userName+"-回复>"+data.username;
            this.commentBtn="回复"
            this.comment.parentId=data.id;
            this.comment.questioner=data.replier
        },
        saveComment() {
            this.comment.replier = this.user.userId
            this.comment.resourceId = this.id
            this.comment.flag = this.type === 'resource'
            saveComment(this.comment)
                .then(res => {
                    console.log(res)
                    if (res.code === 200) {
                        ElMessage.success("评论成功")
                    } else ElMessage.error("评论失败")
                })
        },
        loadNode(node, resolve) {
            //第一层的
            if (node.level === 0) {
                setTimeout(() => {
                    const flag = this.type === "resource"
                    listComment(this.current, this.size, this.id, flag, 0)
                        .then(res => {
                            if (res.code === 200) {
                                this.pages = res.data.pages
                                this.total = res.data.total
                                return resolve(res.data.records)
                            }
                        })
                }, 500)

            } else {
                const flag = this.type === "resource"
                listComment(this.current, this.size, this.id, flag, node.data.id)
                    .then(res => {
                        if (res.code === 200) {
                            return resolve(res.data.records)
                        }

                    })
            }
        },
    },
    computed: {
        user() {
            return this.$store.state.userInfo
        }
    },
}
</script>

<template>
    <div class="flex column" style="width: 100%">
        <div class="flex row space-between ">
            <img v-if="user" :src="user.avatar" alt="" style="width: 40px;height: 40px">
            <div class="flex column " style="width: 100%;height: 100%;border-radius: 10px">
                <el-input class="input" v-model="comment.content" type="textarea"
                          :autosize="{ minRows: 2, maxRows: 10 }"/>
                <div class="flex row space-between align-center" style="width: 100%">
                    <span><span v-show="reply">{{reply}}</span></span>
                    <span class="flex center align-center comment-btn" @click="saveComment">{{ commentBtn }}</span>
                </div>
            </div>
        </div>
        <el-divider/>
        <el-tree :props="props" :load="loadNode" lazy>
            <template #default="{ node, data }">
                <div class="flex align-center row " style="height: 60px;width: 100%">
                    <img :src="data.avatar" alt="" style="width: 40px;">
                    <div class="flex column center" style="height: 100%;width:100% ">
                        <div class="flex row" style="width: 100%">
                            <el-tag effect="plain" type="success" size="small" style="width: fit-content">
                                {{ data.username }}:
                            </el-tag>

                            <span class="time-span">时间: {{data.createTime}}</span>
                        </div>
                        <div class="flex row space-between" style="width: 100%">
                            <span class="comment-content">{{ data.content }}</span>
                            <span @click="replyComment(data)" class="reply-btn">回复</span>
                        </div>

                    </div>
                </div>
            </template>
        </el-tree>

    </div>
</template>

<style scoped>
.reply-btn{
    font-size: 14px;
    color: #069ed7;
    cursor: pointer;
}
.reply-btn:hover{
    color: #21f54c;
}
.time-span{
    font-size: 11px;
}
.comment-content{
    font-size: 15px;
}
:deep(.el-tree-node__content) {
    height: 60px;
}
.input {
    border: 0;
    background: #ececec59;
    outline: none;
}

.comment-btn {
    cursor: pointer;
    border-radius: 15px;
    border: 0;
    background: #ff7e71;
    color: white;
    height: 30px;
    width: 60px;
}

.comment-btn:hover {
    background: #ff8b80;
}

:deep(.el-textarea__inner) {
    border: 0;
    background: transparent;
}
</style>
